{% extends "base.html" %}

{% block title %}User{% endblock %}
{% block user %}class="active"{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-2">
                <img id="icon" src="{{ STATIC_URL }}/image/{% if user.pic %}{{user.pic}}{% else %}kaka.jpg{% endif %}" class="info img-responsive img-thumbnail">
            </div>
            <div class="col-md-10">
                <h1 style="font-size:70px" id=name>{{user.user}}</h1>
                <p style="font-size:50px" id="email" class="info">Email:{{user.email}}</p>
            </div>
        </div>
        <div class="row" style="margin-top:62px">
            <div class="col-md-4">
                <p style="font-size:50px">Region</p>
            </div>
            <div class="col-md-8">
                <p style="font-size:50px;color:gray" id="region" class="info">{{user.region}}</p>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-4">
                <p style="font-size:50px">What's up</p>
            </div>
            <div class="col-md-8">
                <p style="font-size:50px;color:gray" id="motto" class="info">{{user.motto}}</p>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-4">
                <p style="font-size:50px">Album</p>
            </div>
            <div class="col-md-8">
                <img src="/static/image/messi.jpg" style="width:188px">
            </div>
        </div>        
        <hr>
    </div>
    <script>
        function update_user(){
            $.ajax({
                url: "/user/update",
                type: "post",
                date: {
                    "region": $("#region").val(),
                    "motto": $("#motto").val(),
                    "email": $("#email").val(),
                    "pic": $("#icon").val(),
                    "csrfmiddlewaretoken" : "{{ csrf_token }}"
                },
                success: function (res) {
                    if(res["result"]){
                        location.reload()
                    }else{
                        alert(res['message'])
                    }
                }
            })
        }

        $(".info").click(function(){
            $("#region").replaceWith('<input style="font-size:50px;color:gray" id="region" value="'+ $("#region").html() +'">')
            $("#motto").replaceWith('<input style="font-size:50px;color:gray" id="motto" value="'+ $("#motto").html() +'">')
            $("#email").replaceWith('<input style="font-size:50px;color:gray" id="email" placeholder="Email:" value="' +$.trim($("#email").html().split(":")[1])+ '">')
            $("#icon").replaceWith('<input style="font-size:50px;color:gray;width:150px" id="icon" value="'+ "{{ user.pic }}" + '">')
            $("#name").click(function(){
                update_user()
            })
        })
    </script>
{% endblock %}